<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><?=$title;?></title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1QnAxBtPWpvkkIJ1M7uNRhSKB2H4BYfe3MAMD5ijOduM6jVyUBSbtznBSHMwaT43w3gAU97We7_oiQ" type="text/javascript"></script>

<script src="/gmap/src/prototype.js" type="text/javascript"></script>

<script type="text/javascript">
 //<![CDATA[
	function Buildmap() {	

		if (GBrowserIsCompatible()) 
			{
				// create map and add controls
				var map = new GMap2($("map"));
				map.addControl(new GLargeMapControl());        
				map.addControl(new GMapTypeControl());
				
				// set centre point of map
				var centerPoint = new GLatLng('13.762728', '100.465164');
				map.setCenter(centerPoint, 11);	
				
				// add a draggable marker
				var marker = new GMarker(centerPoint, {draggable: true});
				map.addOverlay(marker);
				
				// add a drag listener to the map
				GEvent.addListener(marker, "dragend", function() {
					var point = marker.getPoint();
					map.panTo(point);
					$("latitude").value = point.lat();
					$("longitude").value = point.lng();
				});
			}

	}
    //]]>	
    </script>

  <body onload="Buildmap()" onunload="GUnload()">
	Latitude: <input class="required" type="text" name="latitude" id="latitude" value="" /> 
	Longitude: <input class="required" type="text" name="longitude" id="longitude" value="" />
	<div id="map" style="width:600px;height:400px"></div>
</body>
</html>
